.navbar
  .navbar-inner
    .left
      a(href="index.html").back.link
        i.icon.icon-back
        span Back
    .center Chips/Tags
    .right
      a(href="#").open-panel.link.icon-only
        i.icon.icon-bars
.page(data-page="chips")
  .page-content
    .content-block
      p Chips/Tags represent complex entities in small blocks, such as a contact. They can contain a photo, short title string, and brief information.
    .content-block-title Chips With Text
    .content-block
      .content-block-inner
        .chip
          .chip-label Example Chip
        .chip
          .chip-label Another Chip
        .chip
          .chip-label One More Chip
        .chip
          .chip-label Fourth Chip
        .chip
          .chip-label Last One
    .content-block-title Icon Chips
    .content-block
      .content-block-inner
        .chip
          .chip-media
            i.icon.f7-icons add_round
          .chip-label Add Contact
        .chip
          .chip-media
            i.icon.f7-icons compass
          .chip-label London
        .chip
          .chip-media
            i.icon.f7-icons person
          .chip-label John Doe
    .content-block-title Contact Chips
    .content-block
      .content-block-inner
        .chip
          .chip-media
            img(src="http://lorempixel.com/100/100/people/9/")
          .chip-label Jane Doe
        .chip
          .chip-media
            img(src="http://lorempixel.com/100/100/people/3/")
          .chip-label John Doe
        .chip
          .chip-media
            img(src="http://lorempixel.com/100/100/people/7/")
          .chip-label Adam Smith
        .chip
          .chip-media.bg-pink J
          .chip-label Jennifer
        .chip
          .chip-media.bg-yellow.color-black C
          .chip-label Chris
        .chip
          .chip-media.bg-red K
          .chip-label Kate
    .content-block-title Deletable Chips / Tags
    .content-block
      .content-block-inner
        .chip
          .chip-label Example Chip
          a(href="#").chip-delete
        .chip
          .chip-media.bg-orange.color-black C
          .chip-label Chris
          a(href="#").chip-delete
        .chip
          .chip-media
            img(src="http://lorempixel.com/100/100/people/9/")
          .chip-label Jane Doe
          a(href="#").chip-delete
        .chip
          .chip-label One More Chip
          a(href="#").chip-delete
        .chip
          .chip-media.bg-pink J
          .chip-label Jennifer
          a(href="#").chip-delete
        .chip
          .chip-media
            img(src="http://lorempixel.com/100/100/people/7/")
          .chip-label Adam Smith
          a(href="#").chip-delete
